<template>
    <ui-split title="分屏布局" left="200">
        <!--顶部工具栏-->
        <div class="item" slot="toolbar" >
            <div class="ui vertical animated mini button m-r-10 blue">
                <div class="hidden content">按钮名称 </div>
                <div class="visible content">
                    <i class="icon hand peace"></i>
                </div>
            </div>
            <div class="ui mini basic icon buttons">
              <button class="ui button"><i class="file icon"></i></button>
              <button class="ui button"><i class="save icon"></i></button>
              <button class="ui button"><i class="upload icon"></i></button>
              <button class="ui button"><i class="download icon"></i></button>
            </div>
        </div>

        <!--左布局-->
        <div slot="left">
            <el-tree :data="data"
                :props="defaultProps"
                accordion
                @node-click="handleNodeClick"
                style="border:none"></el-tree>
        </div>

        <!--右布局-->
        <div slot="right">
            <div class="ui scrollbar scroll-no-track content flex">
                <div class="item one p-l-100">
                    <el-table :data="tableData" style="width: 100%">
                        <el-table-column prop="date" label="日期" width="180"></el-table-column>
                        <el-table-column prop="name" label="姓名" width="180"></el-table-column>
                        <el-table-column prop="address" label="地址"></el-table-column>
                    </el-table>

                    <ui-load-md file="ui-split"></ui-load-md>
                </div>

            </div>
        </div>
    </ui-split>
</template>
<script>
    export default {
        data() {
            return {
                tableData    : [{
                    date    : '2016-05-02',
                    name    : '王小虎',
                    address : '上海市普陀区金沙江路 1518 弄'
                }, {
                    date    : '2016-05-04',
                    name    : '王小虎',
                    address : '上海市普陀区金沙江路 1517 弄'
                }, {
                    date    : '2016-05-01',
                    name    : '王小虎',
                    address : '上海市普陀区金沙江路 1519 弄'
                }, {
                    date    : '2016-05-03',
                    name    : '王小虎',
                    address : '上海市普陀区金沙江路 1516 弄'
                }],
                data         : [{
                    label    : '一级 1',
                    children : [{
                        label    : '二级 1-1',
                        children : [{
                            label : '三级 1-1-1'
                        }]
                    }]
                }, {
                    label    : '一级 2',
                    children : [{
                        label    : '二级 2-1',
                        children : [{
                            label : '三级 2-1-1'
                        }]
                    }, {
                        label    : '二级 2-2',
                        children : [{
                            label : '三级 2-2-1'
                        }]
                    }]
                }, {
                    label    : '一级 3',
                    children : [{
                        label    : '二级 3-1',
                        children : [{
                            label : '三级 3-1-1'
                        }]
                    }, {
                        label    : '二级 3-2',
                        children : [{
                            label : '三级 3-2-1'
                        }]
                    }]
                }],
                defaultProps : {
                    children : 'children',
                    label    : 'label'
                }
            };
        },
        methods : {
            handleNodeClick(data) {
                console.log(data);
            }
        }
    };
</script>

